<template>
	<view class="concent">
		<view class="bj" style="z-index: -1;">
			<image :src="backimg" style="z-index: -1;width: 100%;height: 100%;" mode=""></image>
		</view>
		
		<view class="" style="z-index: 5;position: absolute;top: 63rpx;left: 0;width: 100%;">
			<view class="top" style="width: ;">
				<image style="width: 100%;height: 100%;" :src="qishous" mode=""></image>
			</view>
			<view class="" style="width: 96%;background-color: #fff;margin: 20rpx auto;border-radius: 10rpx;">
				<view class="" style="display: flex;text-align: center;align-items: center;padding: 10rpx;justify-content: space-between;">
					<view class="" style="width: 200rpx;height: 45rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
						{{otherAddress}}
					</view>
					<view class="" style="width: 500rpx;">
						<view
							style="width: 100%; position: relative; z-index: 10 ; border-radius: 15px; background-color: white; height: 60rpx; display: flex; align-items: center; justify-content: space-between;">
							<view
								style="width: 100rpx; height:45rpx ; border-radius: 10px;  margin-right: 0rpx; display: flex; justify-content: center; align-items: center;color: #fff;">
								<image style="width: 30rpx;height: 30rpx;" src="../../static/search.png" mode=""></image>
							</view>
							<input v-model="searchName" type="text" style=" width: 50%; font-size: 28rpx;" :placeholder="`请输入要搜索的内容`"
								 />
							<view @click="sousuo"
								style="width: 155rpx; height:45rpx ; font-size:26rpx;border-radius: 10px; background-color: orangered; margin-right: 10rpx; display: flex; justify-content: center; align-items: center;color: #fff;">
								搜索
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="" style="display: flex;justify-content: space-between;">
					<view class="" style="padding: 10rpx;" @click="Moren">
						默认排序
					</view>
					|
					<view class="" style="padding: 10rpx;" @click="Zheng">
						正序
					</view>
					|
					<view class="" style="padding: 10rpx;" @click="Dao">
						倒序
					</view>
				</view> -->
				
				<!-- 封装排序 -->
				<!-- <dropdown @tabClick="tabClick">
					
				</dropdown> -->
				<filter-select @tabClick="selectClick">
					
				</filter-select>
				
			</view>
			
			<view class="bottom">
				<view class="bottoms" v-for="(item,index) in mfList" :key="index">
					<view class="bo_left">
						<image style="width: 100%;height: 180rpx;border-radius: 20rpx;" :src="item.image" mode=""></image>
					</view>
					<view class="bo_right">
						<view class="br-one">
							<view class="" style="background-color: #EF6332;padding: 10rpx;border-radius: 10rpx;color: #fff;">
								免配送费
							</view>
							<view class="" style="border: 3rpx solid #EF6332;border-radius: 10rpx;color: #EF6332;padding: 10rpx;">
								营业中
							</view>
						</view>
						
						<view class="" style="margin-top: 10rpx;">
							{{item.store_name}}
						</view>
						<view class="" style="display: flex;margin-top: 10rpx;align-items: center;">
							<view class="">
								<u-rate :count="count" v-model="value" size="15" ></u-rate>
							</view>
							<view class="" style="font-size: 26rpx;">
								10公里内 10元起送
							</view>
						</view>
						
						<view class="" style="font-size: 26rpx;">
							{{item.address}}
						</view>
						
						
						
					</view>
				</view>
				
				
			</view>
			
		</view>
		
		
	</view>
	
	
	
</template>

<script>
	export default {
		onShow() {
			this.getBackImage()
			this.getnoMoney()
			
			this.otherAddress = uni.getStorageSync('otherAddress')
		},
		data() {
			return {
				count: 5,
				value: 3,
				backimg:'',
				qishous:'',
				mfList:[],
				type:'',
				otherAddress:'',
				good_cate_id:'',
				good_type:'',
				good_is_open:'',
				searchName:'',
				
			}
		},
		
		methods: {
			getBackImage(){
				// backImage
				this.$req('GET',this.$api.backImage,{}).then(res =>{
					this.backimg = res.data.beijing
					this.qishous = res.data.qishou
					
				})
				
			},
			getnoMoney(){
				this.$req('GET',this.$api.mfpeisong,{
					school_id:uni.getStorageSync('addressId'),
					lat:uni.getStorageSync('jingdu'),
					lng:uni.getStorageSync('weidu'),
					user_id:uni.getStorageSync('userId'),
				}).then(res =>{
					this.mfList = res.data.info.data
					
					
				})
			},
			// tabClick(event){
			// 	switch (event.id){
			// 		case 1:
			// 		this.good_cate_id =event.item_id
			// 			break;
			// 		case 2:
			// 		this.good_type =event.item_id
			// 			break;
			// 		case 3:
			// 		this.good_is_open =event.item_id
			// 			break;
			// 		default:
			// 			break;
			// 	}
				
			// 	if(this.good_type != ''){
					
					
			// 		this.$req('GET',this.$api.mfpeisong,{
			// 			school_id:uni.getStorageSync('addressId'),
			// 			lat:uni.getStorageSync('jingdu'),
			// 			lng:uni.getStorageSync('weidu'),
			// 			user_id:uni.getStorageSync('userId'),
			// 			type:this.good_type||'',
			// 		}).then(res =>{
			// 			this.mfList = res.data.info.data
						
						
			// 		})
					
					
			// 	}else if(this.good_is_open != ''){
			// 		this.$req('GET',this.$api.mfpeisong,{
			// 			school_id:uni.getStorageSync('addressId'),
			// 			lat:uni.getStorageSync('jingdu'),
			// 			lng:uni.getStorageSync('weidu'),
			// 			user_id:uni.getStorageSync('userId'),
			// 			is_open:this.good_is_open||'',
			// 		}).then(res =>{
			// 			this.mfList = res.data.info.data
						
						
			// 		})
			// 	}else {
			// 		this.$req('GET',this.$api.mfpeisong,{
			// 			school_id:uni.getStorageSync('addressId'),
			// 			lat:uni.getStorageSync('jingdu'),
			// 			lng:uni.getStorageSync('weidu'),
			// 			user_id:uni.getStorageSync('userId'),
			// 			is_open:this.good_is_open||'',
			// 			type:this.good_type||'',
			// 		}).then(res =>{
			// 			this.mfList = res.data.info.data
						
						
			// 		})
			// 	}
				
				
				
				
				
				// this.$req('GET', this.$api.dianpuList, {
				// 	school_id:uni.getStorageSync('addressId'),
				// 	cate_id:this.good_cate_id||'',
				// 	type:this.good_type||'',
				// 	is_open:this.good_is_open||'',
				// 	user_id:uni.getStorageSync('userId'),
				// 	lat:uni.getStorageSync('jingdu'),
				// 	lng:uni.getStorageSync('weidu')
				// }).then(res => {
				// 	this.dianpu = res.data.info.data
				// })
			// },
			selectClick(item) {
				console.log(item,'itemsssssssss')
				if(item.id == 1){
					this.$req('GET', this.$api.dianpuList, {
						school_id:uni.getStorageSync('addressId'),
						cate_id: item.item_id,
						user_id:uni.getStorageSync('userId'),
						lat:uni.getStorageSync('jingdu'),
						lng:uni.getStorageSync('weidu')
					}).then(res => {
						console.log(res, '查看打印的res')
						this.mfList = res.data.info.data
						console.log(this.dianpu, '打印店铺看看')
					
					
					})
				}else if(item.id == 2){
					this.good_type =item.item_id
					this.$req('GET', this.$api.dianpuList, {
						school_id:uni.getStorageSync('addressId'),
						// cate_id: uni.getStorageSync('fenlei'),
						type:this.good_type,
						user_id:uni.getStorageSync('userId'),
						lat:uni.getStorageSync('jingdu'),
						lng:uni.getStorageSync('weidu')
					}).then(res => {
						console.log(res, '查看打印的res')
						this.mfList = res.data.info.data
						console.log(this.dianpu, '打印店铺看看')
					
					
					})
				}
			},
			
			
			
			sousuo(){
				this.$req('GET',this.$api.mfpeisong,{
					school_id:uni.getStorageSync('addressId'),
					lat:uni.getStorageSync('jingdu'),
					lng:uni.getStorageSync('weidu'),
					user_id:uni.getStorageSync('userId'),
					keyword:this.searchName
				}).then(res =>{
					this.mfList = res.data.info.data
					
					
				})
			}
			
			
			
		},
		
	}
</script>

<style>
	.concent{
		width: 100%;
		height: 2200rpx;
		background-color: cyan;
	}
	
	.bj{
		width: 750rpx;
		height: 2200rpx;
		background-size: 100%;
	}
	
	.top{
		width: 662rpx;
		height: 862rpx;
		margin: 0 auto;
	}
	
	
	.bottom{
		width: 710rpx;
		height: 1000rpx;
		margin: 10rpx auto;
		/* border:5rpx solid #F08A4A; */
		/* background-color: red; */
		border-radius: 20rpx;
		/* display: flex; */
		/* background-color: #fff; */
		padding: 10rpx;
		overflow-y: scroll;
	}
	
	.bottoms{
		width: 710rpx;
		/* height: 262rpx; */
		height: 250rpx;
		margin: 10rpx auto;
		/* border:5rpx solid #F08A4A; */
		background-color: yellow;
		border-radius: 20rpx;
		display: flex;
		background-color: #fff9ef;
	}
	
	
	.bo_left{
		width: 30%;
		margin: 20rpx;
	}
	
	.bo_right{
		width: 70%;
		margin: 20rpx;
		
	}
	
	.br-one{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	
</style>